<template>
  <div class="body" @scroll="scrollChange" ref="scroll">
    <div class="home-entry">
      <div class="wrapper">
        <!-- 轮播图 -->
        <el-carousel :interval="5000" arrow="hover" :autoplay="true" height="500px" v-if="homeBannerList.length > 0">
          <el-carousel-item v-for="item in homeBannerList" :key="item.id">
            <img :src="item.imgUrl" alt="">
          </el-carousel-item>
        </el-carousel>
        <!-- 菜单 -->
        <div class="menu" @mouseleave="categoryHidden">
          <div class="small-class" @mouseenter="categoryShow(i)" v-for="(item, i) in categoryHeadList" :key="item.id">
            <span>{{ item.name }}</span>
            <span v-for="tmp in item.children.slice(0,2)" :key="tmp.id">{{ tmp.name }}</span>
          </div>
          <div class="category" v-show="index !== -1">
            <div class="recommended-div">
              <span>分类推荐</span>
              <span class="recommended">根据您的购买或浏览记录推荐</span>
            </div>
            <div class="card-container">
              <el-card v-for="goods in categoryHeadList[index]?.goods" :key="goods.id">
                <div class="content" @click="onChangePage(goods.id)">
                  <div class="content-img">
                    <img :src="goods.picture" alt="">
                  </div>
                  <div class="content-words">
                    <div>{{ goods.name }}</div>
                    <div>{{ goods.desc }}</div>
                    <div>{{ goods.price }}</div>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
          <div class="sub-brand" @mouseleave="categoryHidden">
            <div class="brand-container" @mouseenter="subBrandShow" >
              <span>品牌</span>
              <span>品牌推荐</span>
            </div>
            <!-- 菜单右侧定位 -->
            <div class="brand-card" v-show="brandIndex !== -1">
              <div class="recommended-div">
                <span>品牌推荐</span>
                <span class="recommended">根据您的购买或浏览记录推荐</span>
              </div>
              <div class="brand-card-container">
                <el-card v-for="c in homeBrand.slice(0, 6)" :key="c.id">
                  <div class="content">
                    <div class="content-img">
                      <img :src="c.picture" alt="">
                    </div>
                    <div class="content-words">
                      <div>{{ c.place }}</div>
                      <div>{{ c.name }}</div>
                      <div>{{ c.desc }}</div>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新鲜好物 -->
    <div class="good-things">
      <div class="new-good-title">
        <div class="new-good-left">
          <span>新鲜好物</span>
          <span>新鲜出炉</span>
          <span>品质靠谱</span>
        </div>
        <div class="more">
          <div >
            查看全部
          </div>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="good-card-container">
        <div class="good-card" v-for="item in newList" :key="item.id" @click="onChangePage(item.id)">
          <div class="good-card-img">
            <img :src="item.picture" alt="">
          </div>
          <div>{{ item.name }}</div>
          <div>￥{{ item.price }}</div>
        </div>
      </div>
    </div>
    <!-- 人气推荐 -->
    <div class="sentiment-things">
      <div class="new-good-title">
        <div class="new-good-left">
          <span>人气推荐</span>
          <span>人气爆款</span>
          <span>不容错过</span>
        </div>
      </div>
      <div class="good-card-container">
        <div class="good-card" v-for="d in homeHotList" :key="d.id">
          <div class="good-card-img">
            <img :src="d.picture" alt="">
          </div>
          <div>{{ d.title }}</div>
          <div>{{ d.alt }}</div>
        </div>
      </div>
    </div>
    <!-- 热门品牌 -->
    <div class="hot-things">
      <div class="new-good-title">
        <div class="new-good-left">
          <span>热门品牌</span>
          <span>国家经典</span>
          <span>品质保证</span>
        </div>
        <div class="icon">
          <el-icon><ArrowLeft /></el-icon>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="good-card-container">
        <div class="good-card" v-for="d in homeBrand" :key="d">
          <div class="good-card-img">
            <img :src="d.picture" alt="">
          </div>
        </div>
      </div>
    </div>
    <!-- goods -->
    <div class="occupy-home" v-for="a in homeGoods" :key="a.id" >
      <div class="new-good-title">
        <div class="new-good-left">
          <span>{{ a.name }}</span>
        </div>
        <div class="new-good-right">
          <div class="children" v-for="children in a.children" :key="children.id">{{ children.name }}</div>
          <div class="good-more">
            <div @click="onChangeCategory(a.id)">
              查看全部
            </div>
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
      </div>
      <div class="occupy-home-container">
        <div class="good-img" @click="onChangeCategory(a.id)">
          <img :src="a.picture" alt="">
          <div class="center">
            <div>{{ a.name + '馆' }}</div>
            <div>{{ a.saleInfo }}</div>
          </div>
        </div>
        <div class="good-card">
          <div class="small-card" v-for="d in a.goods" :key="d.id" @click="onChangePage(d.id)">
            <div class="small-card-img">
              <img :src="d.picture" alt="">
            </div>
            <div>{{ d.name }}</div>
            <div>{{ d.desc }}</div>
            <div>￥{{ d.price }}</div>
            <div class="show-footer">
              <div>找相似</div>
              <div>发现更多宝贝</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最新专题 -->
    <div class="latest-project" ref="occupy">
      <div class="new-good-title">
        <div class="new-good-left">
          <span>最新专题</span>
        </div>
        <div class="good-more">
          <div>
            查看全部
          </div>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="latest-card-container">
        <div class="latest-card" v-for="d in homeSpecial" :key="d.id">
          <div class="latest-card-img">
            <div class="mask" />
            <img :src="d.detailsUrl" alt="">
            <div class="latest-card-content">
              <div>{{ d.title }}</div>
              <div>{{ d.summary }}</div>
            </div>
            <div class="latest-card-price">￥{{ d.lowestPrice }}起</div>
          </div>
          <div class="latest-footer">
            <div class="latest-footer-left">
              <div>
                <el-icon><Star /></el-icon>
                {{ d.collectNum }}
              </div>
              <div>
                <el-icon><View /></el-icon>
                {{ d.viewNum }}
              </div>
            </div>
            <div class="latest-footer-right">
              <span>
                <el-icon><ChatLineSquare /></el-icon>
                {{ d.replyNum }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script name="homePage" setup>
import { ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
const store = useStore();
const router = useRouter();
const occupy = ref(null);
const brandArray = ref([]);
// 当occupy滚动到视野中时，dispatch
// 懒加载
onMounted(() => {
  const clothesObserver = new IntersectionObserver(
    (entries) => {
      if (entries[0].isIntersecting) {
        store.dispatch('home/updateHomeSpecialList'); // 最新专区
      }
    },
    {
      root: null,
      rootMargin: '0px',
      threshold: 0.5,
    },
  );
  clothesObserver.observe(occupy.value);
});


// 请求
store.dispatch('home/updateHomeNavList'); // 分类
store.dispatch('home/updateHomeBannerList'); // 轮播图
store.dispatch('home/updateHomeNewList'); // 新鲜好物
store.dispatch('home/updateHomeHotList'); // 人气推荐
store.dispatch('home/updateHomeBrandList'); // 热门品牌
store.dispatch('home/updateHomegoodList'); // 产品区块

// 拿数据
const categoryHeadList = computed(() => store.state.home.homeNavList);
const homeBannerList = computed(() => store.state.home.homeBannerList);
const newList = computed(() => store.state.home.homeNewList);
const homeHotList = computed(() => store.state.home.homeHotList);
const homeBrand = computed(() => store.state.home.homeBrandList);
const homeGoods = computed(() => store.state.home.homegoodList);
const homeSpecial = computed(() => store.state.home.homeSpecialList);

const categoryChangeShow = ref(false);
const cardChangeShow = ref(false);
const brandCardShow = ref(false);
const index = ref(-1);
const brandIndex = ref(-1);


function categoryShow(i) {
  index.value = i;
}
function subBrandShow(i) {
  brandIndex.value = i;
}
function categoryHidden() {
  index.value = -1;
  brandIndex.value = -1;
}
function onChangePage(id) {
  router.push({
    name: 'product',
    params: {
      id,
    },
  });
}
function onChangeCategory(id) {
  router.push({
    name: 'category',
    params: {
      id,
    },
  });
}
// function cardFooterShow() {
//   cardChangeShow.value = true;
// }
// function cardFooterHidden() {
//   cardChangeShow.value = false;
// }
// function brandShow() {
//   brandCardShow.value = true;
// }
// function brandHidden() {
//   brandCardShow.value = false;
// }

</script>
<style lang="scss" scoped>
.body{
  overflow: auto;
  a{
    text-decoration: none;
  }
  .home-entry{
    background-color: #f5f5f5;
    .wrapper{
      overflow: hidden;
      width: 1240px;
      height: 500px;
      margin: 0 auto;
      position: relative;
      :deep(.el-carousel__arrow--left) {
        left: 270px;
      }
      :deep(.el-carousel ){
        --el-carousel-arrow-size: 44px;
        i{
          font-size: 16px;
        }
      }
      :deep(.el-carousel__button){
        width: 12px;
        height: 12px;
        border-radius: 12px;
        margin-right: 12px;
        margin-bottom: 20px;
        transform: translateX(150px);
      }
      img{
        height: 100%;
      }
      .el-carousel__item h3 {
        color: #475669;
        opacity: 0.75;
        margin: 0;
        text-align: center;
      }
      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }
      .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
      }
      .menu{
        color: #fff;
        width: 250px;
        height: 500px;
        background: rgba(0,0,0,.8);
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        .menu-wrapper{
          width: 250px;
        }
        .brand-container{
          padding-left: 40px;
          height: 50px;
          line-height: 50px;
          span{
            margin-right: 4px;
          }
        }
        .brand-container:hover{
          background: #27ba9b;
        }

        .small-class{
          cursor: pointer;
          padding-left: 40px;
          height: 50px;
          line-height: 50px;
          span{
            margin-right: 4px;
          }
        }
        .small-class:hover{
          background: #27ba9b;
        }
        .small-class span:nth-child(2), span:nth-child(3){
          font-size: 14px;
        }
      }

      .category{
        background: rgba(242, 231, 231, 0.7);
        box-sizing: border-box;
        position: absolute;
        width: 990px;
        height: 500px;
        top: 0;
        left: 250px;
        padding: 16px 16px;
        .recommended-div{
          height: 30px;
          line-height: 30px;
          box-sizing: border-box;
          .recommended{
          margin-left: 10px;
          font-size: 14px;
          }
        }

        .card-container{
          padding: 16px 0;
          box-sizing: border-box;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
          :deep(.el-card__body){
            padding: 12px;
          }
          :deep(.el-card):hover{
            background: #e7f8f4;
            cursor: pointer;
          }
          .content{
            display: flex;
            justify-content: space-between;
            .content-img{
              height: 95px;
              width: 95px;
            }
            .content-words{
              width: 180px;
              box-sizing: border-box;
              & div:nth-child(1) {
                height: 48px;
              }
              & div:nth-child(2) {
                height: 24px;
                font-size: 14px;
                color: #ccc;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              & div:nth-child(3) {
                font-size: 18px;
                font-weight: 600;
                height: 26px;
                color: #cf4444;
              }
            }
          }
        }
      }
      .brand-card{
        background: rgba(242, 231, 231, 0.7);
        box-sizing: border-box;
        position: absolute;
        width: 990px;
        height: 500px;
        top: 0;
        left: 250px;
        padding: 16px 16px;
        .recommended-div{
          height: 30px;
          line-height: 30px;
          box-sizing: border-box;
          .recommended{
          margin-left: 10px;
          font-size: 14px;
          }
        }

        .brand-card-container{
          padding: 16px 0;
          box-sizing: border-box;
          height: calc(100% - 30px);
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
          :deep(.el-card__body){
            padding: 12px;
          }
          :deep(.el-card):hover{
            background: #e7f8f4;
            cursor: pointer;
          }
          .content{
            display: flex;
            justify-content: space-between;
            .content-img{
              img{
                height: 165px;
                width: 120px;
              }
            }
            .content-words{
              width: 140px;
              box-sizing: border-box;
              & div:nth-child(1) {
                color: #aaa;
              }
              & div:nth-child(2) {
                height: 24px;
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              & div:nth-child(3) {
                font-size: 14px;
                height: 26px;
                color: #aaa;
              }
            }
          }
        }
      }
      .prev{
        font-size: 20px;
        color: #fff;
        position: absolute;
        left: 270px;
        top: 250px;
        width: 44px;
        height: 44px;
        line-height: 48px;
        text-align: center;
        border-radius: 44px;
        background: rgba(0,0,0,.2);
      }
      .next{
        font-size: 20px;
        color: #fff;
        position: absolute;
        right: 20px;
        top: 250px;
        width: 44px;
        height: 44px;
        line-height: 48px;
        text-align: center;
        border-radius: 44px;
        background: rgba(0,0,0,.2);

      }
    }
  }
  // 新鲜好物
  .good-things{
    .new-good-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40px 0;
      box-sizing: border-box;
      width: 1240px;
      height: 115px;
      margin: 0 auto;
      & div:nth-child(2){
        color: #aaa;
        display: flex;
        align-items: center;
      }
      .more:hover{
        color: #27ba9b;
        cursor: pointer;
      }
      .new-good-left{
        & span:nth-child(1){
          font-size: 32px;
          margin-right: 20px;
        }
        & span:nth-child(2), :nth-child(3){
          margin-right: 12px;
          color: #aaa;
        }
      }
    }
    .good-card-container{
      display: flex;
      justify-content: space-around;
      width: 1240px;
      height: 426px;
      margin: 0 auto;
      .good-card{
        cursor: pointer;
        width: 306px;
        height: 406px;
        background: #f0f9f4;
        transition: all 500ms ease;
        &:hover{
          box-shadow: 0 3px 10px #ccc;
          transform: translateY(-4px);
        }
        .good-card-img{
          img{
            width: 306px;
            height: 306px;
          }
        }
        & div:nth-child(2){
          font-size: 22px;
          padding: 12px 30px 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        & div:nth-child(3){
          text-align: center;
          font-size: 22px;
          padding: 12px 30px 0;
          color: #cf4444;
        }
      }
    }

  }
  // 人气推荐
  .sentiment-things{
    .new-good-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40px 0;
      box-sizing: border-box;
      width: 1240px;
      height: 115px;
      margin: 0 auto;
      & div:nth-child(2){
        color: #aaa;
        display: flex;
        align-items: center;
      }


      .new-good-left{
        & span:nth-child(1){
          font-size: 32px;
          margin-right: 20px;
        }
        & span:nth-child(2), :nth-child(3){
          margin-right: 12px;
          color: #aaa;
        }
      }
    }
    .good-card-container{
      display: flex;
      justify-content: space-around;
      width: 1240px;
      height: 426px;
      margin: 0 auto;
      .good-card{
        width: 306px;
        height: 406px;
        transition: all 500ms ease;
        cursor: pointer;
        &:hover{
          box-shadow: 0 3px 10px #ccc;
          transform: translateY(-4px);
        }
        .good-card-img{
          img{
            width: 306px;
            height: 306px;
          }
        }
        & div:nth-child(2){
          font-size: 22px;
          padding-top: 12px;
          text-align: center;
        }
        & div:nth-child(3){
          text-align: center;
          font-size: 18px;
          padding-top: 12px;
          color: #999;
        }
      }
    }
  }
  // 热门品牌
  .hot-things{
    background-color: #f5f5f5;
    .new-good-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40px 0;
      box-sizing: border-box;
      width: 1240px;
      height: 115px;
      margin: 0 auto;
      & div:nth-child(2){
        color: #aaa;
        display: flex;
        align-items: center;
      }
      .new-good-left{
        & span:nth-child(1){
          font-size: 32px;
          margin-right: 20px;
        }
        & span:nth-child(2), :nth-child(3){
          margin-right: 12px;
          color: #aaa;
        }
      }
      .icon{
        display: flex;
        & i:nth-child(1){
          width: 20px;
          height: 20px;
          background-color: #ddd;
          color: #fff;
          cursor:no-drop
        }
        & i:nth-child(2){
          width: 20px;
          height: 20px;
          background-color: #27ba9b;
          margin-left: 8px;
          color: #fff;
        }

      }
    }
    .good-card-container{
      display: flex;
      width: 1240px;
      height: 305px;
      margin: 0 auto;
      padding-bottom: 40px;
      overflow: hidden;
      .good-card{
        cursor: pointer;
        width: 306px;
        height: 305px;
        margin-right: 10px;
        .good-card-img{
          img{
            width: 240px;
            height: 305px;
          }
        }
      }
    }
  }
  // 居家
  .occupy-home{
    .new-good-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40px 0;
      box-sizing: border-box;
      width: 1240px;
      height: 115px;
      margin: 0 auto;
      .new-good-left{
        span{
          font-size: 32px;
          margin-right: 20px;
        }
      }
      .new-good-right{
        display: flex;
        justify-content: center;
        div{
          padding: 0 12px;
        }
        .children:hover{
          background: #27ba9b;
          border-radius: 2px;
        }
        & div:nth-child(4){
          margin-right: 80px;
        }
        .good-more{
          display: flex;
          align-items: center;
          color: #aaa;
          div{
            padding: 0;
          }
          &:hover{
            color: #27ba9b;
          }
        }

      }
    }
    .occupy-home-container{
      display: flex;
      justify-content: space-between;
      width: 1240px;
      height: 610px;
      margin: 0 auto;
      .good-img{
        width: 240px;
        height: 610px;
        position: relative;
        cursor: pointer;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .center{
          display: flex;
          color: #fff;
          position: absolute;
          overflow: hidden;
          height: 66px;
          top: 50%;
          & div:nth-child(1){
            width: 76px;
            height: 66px;
            line-height: 66px;
            text-align: center;
            background: rgb(0,0,0,);
          }
          & div:nth-child(2){
            width: 112px;
            height: 66px;
            line-height: 66px;
            text-align: center;
            background: rgba(0,0,0,.7);
          }
        }
      }
      .good-card{
        width: 990px;
        height: 610px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        cursor: pointer;
        .small-card{
          width: 240px;
          height: 300px;
          padding: 10px 30px;
          box-sizing: border-box;
          outline: 1px solid #fff;
          position: relative;
          transition: all .5s;
          .small-card-img{
            width: 160px;
            height: 160px;
            margin: 0 auto;
            img{
              width: 160px;
              height: 160px;
            }
          }
          & div:nth-child(2){
            margin-top: 6px ;
          }
          & div:nth-child(3){
            margin-top: 6px ;
            color: #555;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          & div:nth-child(4){
            margin-top: 6px ;
            font-size: 20px;
            color: #cf4444;
          }
          .show-footer{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 240px;
            height: 0px;
            opacity: 0;
            overflow: hidden;
            background-color: #27ba9b;
            transition: all .5s ease;
            & div:nth-child(1){
              width: 120px;
              height: 41px;
              line-height: 41px;
              margin: 0 auto;
              text-align: center;
              color: #fff;
              border-bottom: 1px solid #fff;
              font-size: 18px;
            }
            & div:nth-child(2){
              width: 120px;
              height: 41px;
              line-height: 41px;
              margin: 0 auto;
              text-align: center;
              color: #fff;
              font-size: 14px;
            }
          }
        }
        .small-card:hover{
          outline: 1px solid #27ba9b;
          .show-footer{
            // display: block;
            opacity: 1;
            height: 86px;
          }
        }
      }
    }
  }
  .latest-project{
    background-color: #f5f5f5;
    .new-good-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40px 0;
      box-sizing: border-box;
      width: 1240px;
      height: 115px;
      margin: 0 auto;
      .new-good-left{
        span{
          font-size: 32px;
          margin-right: 20px;
        }
      }
      .good-more{
        display: flex;
        align-items: center;
        color: #aaa;
        div{
          padding: 0;
        }
      }
    }
    .latest-card-container{
      width: 1240px;
      height: 380px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      .latest-card{
        width: 404px;
        height: 360px;
        background-color: #fff;
        transition: all 500ms ease;
        &:hover{
          box-shadow: 0 3px 10px #ccc;
          transform: translateY(-4px);
        }
        .latest-card-img{
          position: relative;
          .mask{
            background-image: linear-gradient(0deg,rgba(0,0,0,.8),transparent 50%);
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 288px;
          }
          img{
            width: 404px;
            height: 288px;
            object-fit: cover;
          }
          .latest-card-content{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 260px;
            height: 70px;
            padding-left: 16px;
            & div:nth-child(1){
              font-size: 22px;
              color: #fff;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            & div:nth-child(2){
              font-size: 19px;
              color: #999;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .latest-card-price{
            position: absolute;
            bottom: 25px;
            right: 16px;
            background-color: #fff;
            color: #cf4444;
            padding: 2px 4px 2px 4px;
            border-radius: 2px;
          }
        }
        .latest-footer{
          display: flex;
          justify-content: space-between;
          padding: 0 20px;
          .latest-footer-left{
            display: flex;
            div{
              height: 72px;
              line-height: 72px;
              margin-right: 25px;
            }

          }
          .latest-footer-right{
            span{
              height: 72px;
              line-height: 72px;
            }
          }
        }
      }
    }
  }
}
</style>
